
<template>
  <div id="jurisdiction" class="role">
    <el-container>
      <el-aside
        width="25%"
        style="border: 1px solid #f3f3f3; height: 85vh; padding: 20px 0"
      >
        <!-- show-checkbox -->
        <el-tree
          :data="dataList"
          show-checkbox
          v-loading="loadNode"
          default-expand-all
          :default-checked-keys="params.fujiCheckedId"
          node-key="id"
          ref="tree"
          @node-click="handleNodeClick"
          :highlight-current="true"
          :props="defaultProps"
        >
        </el-tree>
      </el-aside>
      <el-main style="border: 1px solid #f3f3f3; height: 85vh">
        <div class="box2" v-if="dataList.length > 0">
          <div class="title">数据权限</div>

          <div
            class="cont"
            v-if="dataList[params.fujiindex].permission.length > 0"
          >
            <div
              v-for="(item, index) in dataList[params.fujiindex].permission"
              :key="index"
            >
              <el-checkbox v-model="item.is_checkout">{{
                item.name
              }}</el-checkbox>
            </div>
          </div>
          <div class="cont" v-else>
            <div style="color: #838383; font-size: 16px">无数据权限</div>
          </div>
          <div class="buts">
            <el-button @click="sub()" type="primary">确定</el-button>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
let t;
import TopManu from "@/components/TopMenu";

export default {
  name: "jurisdiction",
  data() {
    return {
      defaultProps: {
        // children: 'permission',
        label: "title",
      },
      loadNode:true,
      params: {
        name: "",

        fujiindex: 0,
        fujiCheckedId: [], //指定父级选中得字段
      },
      dataList: [],
      role_id: "",
      tadate: [],
      art: [],
    };
  },
 
  watch: {
		'$route' (to, from) {
        console.log("to",to)
        if(to.name=='jurisdiction'){
          if(to.query.id){
            t.role_id = to.query.id;
             
            t.getInfo()
          }
        }
       
     
		},
  },

  created() {
    t = this;
     t.role_id = t.$route.query.id;
     t.getInfo()

   
  },
 
  methods: {
    getInfo(){
      t.loadNode=true;
      t.params.fujiCheckedId=[];
       Promise.all([t.getList(), t.getListRoid()]).then((res) => {
      
      t.loadNode=false;
      if (res[0].code == 200) {
        t.dataList = res[0].data.map((v) => {
          let permission = [];
          if (v.permission.length > 0) {
            permission = v.permission.map((v2) => {
              return {
                ...v2,
                is_checkout: false,
              };
            });
          }
          return {
            ...v,

            permission: permission,
          };
        });
      }
      if (res[1].code == 200) {
        t.tadate = res[1].data;
        res[1].data.forEach((v2) => {
          t.params.fujiCheckedId.push(v2.id);
        });

      }
    });
    },
    handleNodeClick(data) {
      console.log(data, t.tadate);
      // var art=[]
      t.tadate.forEach((v3) => {
        if (v3.id == data.id) {
          t.art = v3.permission;
        }
      });
      t.dataList.forEach((v, index) => {
        if (v.id == data.id) {
          v.permission.forEach((v2) => {
            if (!v2.is_checkout) {
              t.art.forEach((v3, i) => {
                v2.is_checkout = v2.is_checkout ? true : v3.name == v2.name;
              });
            }
          });
          t.params.fujiindex = index;
        }
      });
    },
    getList() {
      return new Promise((resolve, reject) => {
        t["_API"].getPermissionMenuIndex({}).then((res) => {
          resolve(res);
        });
      });
    },
    getListRoid() {
      let d = {
        role_id: t.role_id,
      };
      return new Promise((resolve, reject) => {
        t["_API"].getPermissionMenuIndex(d).then((res) => {
          resolve(res);
          if (
            t.role_id == JSON.parse(localStorage.getItem("userInfo")).role_id
          ) {
            localStorage.setItem("roleConfig", JSON.stringify(res.data));
          }
        });
      });
    },
    sub() {
      let d = {
        role_id: t.role_id,
        permission: [],
      };

      let xuanzhongData = this.$refs.tree.getCheckedKeys();

      this.dataList.forEach((v1) => {
        xuanzhongData.forEach((v2) => {
          if (v2 == v1.id) {
            d.permission.push({
              menu_id: v1.id,
              permission_id: "",
              permission_type_id: v1.type,
            });
          }
        });
        if (v1.permission.length > 0) {
          v1.permission.forEach((v3) => {
            if (v3.is_checkout) {
              d.permission.push({
                menu_id: v3.menu_id,
                permission_id: v3.id,
                permission_type_id: v3.type,
              });
            }
          });
        }
      });

      t["_API"].getPermissionSave(d).then((res) => {
        console.log("res", res);
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.getListRoid();
          setTimeout(() => {
            this.$router.go(-1);
          }, 500);
        }
      });
    },
  },
  components: {
    TopManu,
  },
};
</script>

<style lang="scss" scoped>
.role {
  margin: 5% 5% 0;
}

.box2 {
  > .title {
    padding: 16px;
    font-size: 20px;
    border-bottom: 1px solid #e8e8e8;
  }
  > .cont {
    padding: 16px 0;

    /deep/ .el-checkbox__label {
      font-size: 18px;
    }
  }
  > .buts {
    position: absolute;
    bottom: 30px;
    width: 100%;
  }
}
.search {
  // border: 1px solid #f2f2f2;

  padding-bottom: 20px;
  border-radius: 10px;
  .s1 {
    margin-bottom: 20px;
    width: 405px;
    display: flex;
    .el-input {
      margin-right: 10px;
    }
    button {
      margin-left: 20px;

      color: white;
    }
  }
  .selectBai {
    display: flex;
    > div {
      margin-right: 10px;
    }
  }
}

.editList {
  display: flex;
  width: 300px;
  align-items: center;
  margin-bottom: 20px;
  margin-left: 20px;
  [c1] {
    width: 100px;
  }
}

/deep/ .el-tree-node__label {
  font-size: 18px;
}
/deep/ .el-checkbox__inner {
  width: 20px;
  height: 20px;
}
/deep/ .el-checkbox__inner::after {
  left: 6px;
  top: 2px;
  height: 10px;
}
/deep/ .el-tree-node {
  padding: 0px 0 10px;
}
</style>
